import React,{Component} from 'react';
import {View,Text,ImageBackground,ScrollView,Image} from 'react-native';
import THNav from '../../../../components/THNav'
import { BASE_URI } from '../../../../utils/pathMap';
import { pxToDp } from '../../../../utils/stylesKits';
import THButton from '../../../../components/THButton'
  class Index extends Component{
    render(){
      console.log('??'+JSON.stringify(this.props.route.params))
      const params = this.props.route.params
      if(!params.currentUser) return <></>
      return(
        <ImageBackground
        style={{flex:1,width:"100%"}}
          source={require("../../../../res/qabg.png")}
        >
          <THNav title="测试结果" />
          <ImageBackground
            style={{flex:1,width:"100%",position:"relative"}}
            resizeMode="stretch"
            source={require("../../../../res/result.png")}
          >
            <Text
            style={{position:"absolute",top:"1%",left:"6%",color:"#ffffff9a",letterSpacing:pxToDp(2)}}
            >灵魂基因鉴定单</Text>

            <View style={{flexDirection:"row",justifyContent:"center",alignItems:"center",width:"45%",position:"absolute",top:"6%",right:"5%"}}>
              <Text style={{color:"#fff",fontSize:pxToDp(12)}}>[</Text>
              <Text style={{color:"#fff",fontSize:pxToDp(12)}}>{this.props.route.params.currentUser.nick_name}</Text>
              <Text style={{color:"#fff",fontSize:pxToDp(12)}}>]</Text>
            </View>
            {/* 测试结果 */}
            <ScrollView
              style={{width:"47%",position:"absolute",right:"5%",height:"26%",top:"10%"}}
            >
              <Text 
                style={{color:"#fff"}}
              >{params.content}</Text>
            </ScrollView>
              <View style={{position:"absolute",left:"5%",top:"42%"}}>
                <Text style={{color:"#ffffff9a",fontSize:pxToDp(10)}}>外向</Text>
                <Text style={{color:"#ffffff9a",fontSize:pxToDp(10)}}>{params.extroversion}%</Text>
              </View>
              <View style={{position:"absolute",left:"5%",top:"49%"}}>
                <Text style={{color:"#ffffff9a",fontSize:pxToDp(10)}}>判断</Text>
                <Text style={{color:"#ffffff9a",fontSize:pxToDp(10)}}>{params.judgment}%</Text>
              </View>
              <View style={{position:"absolute",left:"5%",top:"56%"}}>
                <Text style={{color:"#ffffff9a",fontSize:pxToDp(10)}}>抽象</Text>
                <Text style={{color:"#ffffff9a",fontSize:pxToDp(10)}}>{params.abstract}%</Text>
              </View>
              <View style={{position:"absolute",right:"5%",top:"43%"}}>
                <Text style={{color:"#ffffff9a",fontSize:pxToDp(10)}}>理性</Text>
                <Text style={{color:"#ffffff9a",fontSize:pxToDp(10)}}>{params.rational}%</Text>
              </View>
            <Text style={{color:"#ffffff9a",position:"absolute",left:"5%",top:"68%"}}>与你相似</Text>
            <ScrollView
              horizontal={true}
              contentContainerStyle={{flexDirection:"row",alignItems:"center"}}
              style={{position:"absolute",width:"96%",height:"11%",left:"2%",top:"72%"}}
            >
              <Image style={{marginLeft:pxToDp(5),width:pxToDp(50),height:pxToDp(50),borderRadius:pxToDp(25)}} 
              source={require("../../../../res/headfriend.png")} />
              <Image style={{marginLeft:pxToDp(5),width:pxToDp(50),height:pxToDp(50),borderRadius:pxToDp(25)}} 
              source={require("../../../../res/headfriend.png")} />
              <Image style={{marginLeft:pxToDp(5),width:pxToDp(50),height:pxToDp(50),borderRadius:pxToDp(25)}} 
              source={require("../../../../res/headfriend.png")} />
              <Image style={{marginLeft:pxToDp(5),width:pxToDp(50),height:pxToDp(50),borderRadius:pxToDp(25)}} 
              source={require("../../../../res/headfriend.png")} />
              <Image style={{marginLeft:pxToDp(5),width:pxToDp(50),height:pxToDp(50),borderRadius:pxToDp(25)}} 
              source={require("../../../../res/headfriend.png")} />
              <Image style={{marginLeft:pxToDp(5),width:pxToDp(50),height:pxToDp(50),borderRadius:pxToDp(25)}} 
              source={require("../../../../res/headfriend.png")} />
            </ScrollView>
            {/* 继续测试按钮 */}
                <THButton 
                onPress={()=>this.props.navigation.navigate("Textsoul")}
                style={{width:"96%",height:pxToDp(40),position:"absolute",top:"90%",aliginSelf:"center",left:"2%"}}>继续测试</THButton>
          </ImageBackground>
        </ImageBackground>
      );
    }
  }
export default Index;